<template>
  <div class="app-container">
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>提现概览</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <span>待处理余额提现笔数</span>
              <h2>{{data.withdraw.pending_num}}</h2>
            </el-col>
            <el-col :span="12">
              <span>待处理余额提现金额</span>
              <h2>￥{{data.withdraw.pending_money}}</h2>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span>余额提现成功笔数</span>
              <h2>{{data.withdraw.success_num}}</h2>
            </el-col>
            <el-col :span="12">
              <span>余额提现成功金额</span>
              <h2>￥{{data.withdraw.success_money}}</h2>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span>待处理佣金提现笔数</span>
              <h2>{{data.withdraw.commission_pending_num}}</h2>
            </el-col>
            <el-col :span="12">
              <span>待处理佣金提现金额</span>
              <h2>￥{{data.withdraw.commission_pending_money}}</h2>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>会员概览</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <span>今日新增会员数</span>
              <h2>{{data.user.today}}</h2>
            </el-col>
            <el-col :span="8">
              <span>近七日新增会员数</span>
              <h2>{{data.user.seven}}</h2>
            </el-col>
            <el-col :span="8">
              <span>近30天新增会员数</span>
              <h2>{{data.user.month}}</h2>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <span>注册会员数</span>
              <h2>{{data.user.register}}</h2>
            </el-col>
            <el-col :span="8">
              <span>实名会员数</span>
              <h2>{{data.user.auth}}</h2>
            </el-col>
            <el-col :span="8">
              <span>投资会员数</span>
              <h2>{{data.user.paid}}</h2>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日成交</span>
            <el-button type="success" size="mini" style="float: right; padding: 3px 0">日</el-button>
          </div>
          <h2>
            ￥{{data.order.today_money}}
          </h2>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>昨日成交</span>
            <el-button type="success" size="mini" style="float: right; padding: 3px 0">日</el-button>
          </div>
          <h2>
            ￥{{data.order.yesterday_money}}
          </h2>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>近七日成交</span>
            <el-button type="primary" size="mini" style="float: right; padding: 3px 0">周</el-button>
          </div>
          <h2>
            ￥{{data.order.seven_money}}
          </h2>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>近一月成交</span>
            <el-button type="success" size="info" style="float: right; padding: 3px 0">月</el-button>
          </div>
          <h2>
            ￥{{data.order.month_money}}
          </h2>
        </el-card>

      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>在投金额</span>
            <el-button type="warning" size="mini" style="float: right; padding: 3px 0">共</el-button>
          </div>
          <h2>
            ￥{{data.order.in_money}}
          </h2>
        </el-card>

      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>在投收益</span>
            <el-button type="warning" size="mini" style="float: right; padding: 3px 0">共</el-button>
          </div>
          <h2>
            ￥{{data.order.in_payoff}}
          </h2>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>累计成交</span>
            <el-button type="warning" size="mini" style="float: right; padding: 3px 0">共</el-button>
          </div>
          <h2>
            ￥{{data.order.total_money}}
          </h2>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>累计收益</span>
            <el-button type="warning" size="mini" style="float: right; padding: 3px 0">共</el-button>
          </div>
          <h2>
            ￥{{data.order.total_paid}}
          </h2>
        </el-card>

      </el-col>
    </el-row>


  </div>

</template>

<script>
  import { getHome } from '../../api/home'

  export default {
    name: 'Dashboard',
    data() {
      return {
        data: {
          order:
            { today_money: 0, yesterday_money: 0, seven_money: 0, month_money: '0.00', in_money: 0, in_payoff: 0, total_money: 0, total_paid: 0 },
          user:
            { today: 0, seven: 0, month: 0, register: 0, auth: 0, paid: 0 },
          withdraw:
            { pending_num: 0, pending_money: 0, success_num: 1, success_money: '0', commission_pending_num: 0 , commission_pending_money: 0 }
        }
      }
    },
    created() {
      this.getHome()
    },
    methods: {
      async getHome() {
        const res = await getHome()
        this.data = res.data
      }
    }
  }

</script>

<style>
  .topTitle {
    margin-bottom: 20px;
  }

  .static b {
    color: #20a0ff;
  }
</style>
